<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index" class="zhushou-big" :style="{backgroundSize:'100% '+dwImgHeight}">
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<mescroll-body :ref="'mescrollRef'+i" @init="mescrollInit" :top="topXp+45+'px'" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<!-- 数据列表 -->
			<!-- <good-list :list="goods"></good-list> -->
			<view class="community-list">
				<view class="community-list-left">
					<view class="community-list-item" v-for="(item,index) in goods" :key="item" v-if="index%2 == 0" @click="gotoDetail(item)">
						<view class="content-img-box">
							<u-skeleton rows="2" rowsHeight="185" :title="false" loading v-if="!item.image"></u-skeleton>
							<image class="content-img" :src="item.image" mode="aspectFit" v-if="item.image"></image>
							<!-- <view class="content-tip">审核中</view> -->
						</view>
						<view class="content-item-bottom">
							<view class="content-item-bottom-title">{{item.title}}</view>
							<view class="content-item-bottom-content">
								<view class="content-item-bottom-content-left">
									<image v-if="item.user.img" class="user-logo-bottom" :src="item.user.img" mode="scaleToFill"></image>
									<image v-if="!item.user.img" class="user-logo-bottom" src="../../static/my_icon_head@2x.png" ></image>
									<p>{{item.user.nickname}}</p>
								</view>
								<view class="content-item-bottom-content-right">
									<view class="content-item-bottom-content-right-item">
										<u-icon name="heart-fill" color="#CACACA" size="16"></u-icon>
										<p>{{item.likes}}</p>
									</view>
									<!-- <view class="content-item-bottom-content-right-item">
										<image style="width: 16px;height: 16px;" src="../../static/community_icon_send@2x.png" mode=""></image>
										<p>{{item.share}}</p>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="community-list-right" >
					<view class="community-list-item" v-for="(item,index) in goods"  :key="item" v-if="index%2 == 1" @click="gotoDetail(item)">
						<view class="community-list-item">
							<view class="content-img-box">
								<u-skeleton rows="2" rowsHeight="185" :title="false" loading v-if="!item.image"></u-skeleton>
								<image class="content-img" :src="item.image" v-if="item.image" mode="scaleToFill"></image>
								<!-- <view class="content-tip">审核中</view> -->
							</view>
							<view class="content-item-bottom">
								<view class="content-item-bottom-title">{{item.title}}</view>
								<view class="content-item-bottom-content">
									<view class="content-item-bottom-content-left">
										<image class="user-logo-bottom" :src="item.user.img" mode="scaleToFill"></image>
										<view>{{item.user.nickname}}</view>
									</view>
									<view class="content-item-bottom-content-right">
										<view class="content-item-bottom-content-right-item">
											<u-icon name="heart-fill" color="#CACACA" size="16"></u-icon>
											<view>{{item.likes}}</view>
										</view>
										<!-- <view class="content-item-bottom-content-right-item">
											<image style="width: 16px;height: 16px;" src="../../static/community_icon_send@2x.png" mode=""></image>
											<p>{{item.share}}</p>
										</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="fabu-btn" @click="fabu()">
			发布作品
		</view>
		<u-popup :show="show" @close="show = false" :round="10" bgColor="#f8f8f8">
			<view class="select-title">选择AI历史对话内容发布作品</view>
			<view class="chat-list">
				<view :class="['chat-list-item',index == select_index ? 'select-item': '']" v-for="(item,index) in chatList" :key="item" @click="selectChat(index)">
					<view class="chat-list-left">
						<image class="logo-chat" v-if="item.dialog.app_icon" :src="item.dialog.app_icon" mode=""></image>
						<image class="logo-chat-img" v-else src="../../static/ai_index_icon_robot@2x.png" mode=""></image>
					</view>
					<view class="chat-list-right">
						<view class="chat-list-right-top" v-if="item.type == 'text'">{{item.dialog.message}}</view>
						<view class="chat-list-right-top" v-if="item.type == 'img'">图片</view>
						<view class="chat-list-right-bottom">{{item.dialog.updated_at}} {{item.dialog.app_name ? item.dialog.app_name : ''}}</view>
					</view>
				</view>
				<view style="width: 100%;text-align: center;" v-if="chatList.length === 0">~暂无对话~</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import http from '../../api/api-index.js'
	
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			topXp:{
				type:Number,
				default(){
					return 0
				}
			}
		},
		watch:{
			topXp(a,b){
				const chubili = 750/450
				uni.getSystemInfo({
					success: (res) => {
						let screenWidth = res.screenWidth
						let bgImgHeight = screenWidth/chubili
						this.dwImgHeight = bgImgHeight+'px'
					}
				})
			}
		},
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				chatList:[],
				upOption:{
					auto:false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
						btnText: '去看看'
					}
				},
				user_id:'',
				goods: [] ,//列表数据
				show:false,
				dwImgHeight:'0',//背景图的高度
			}
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.i: 每个tab页的专属下标
				// this.index: 当前tab的下标
				let uid = uni.getStorageSync('uid');
				this.user_id = uid
				if(this.user_id){
					this.getHistoryList()
				}
				
				http.getWorksList({
					page:page.num,
					limit:page.size
				}).then((res)=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(res.data.result.length);
					if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods=this.goods.concat(res.data.result); //追加新数据
					
				}).catch(()=>{
					this.mescroll.endErr();
				})
				
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			//发布作品
			fabu(){
				if(!this.user_id){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					this.show = true
				}
			},
			getHistoryList(){
				uni.showLoading();
				if(!this.user_id){
					uni.showToast({
						title:'暂无登录',
						icon:'none'
					})
					return false
				}
				http.getHistory({
					user_id:this.user_id
				}).then((res)=>{
					uni.hideLoading()
					let arrayList = res.data.result
					arrayList.forEach((item)=>{
						if(item.dialog.message.includes('img')){
							item.type = 'img'
						}else{
							item.type = 'text'
						}
					})
					this.chatList = arrayList
				})
			},
			selectChat(index){
				//去发布
				if(this.chatList[index].dialog.app_name){
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?ident='+this.chatList[index].ident+"&name="+this.chatList[index].dialog.app_name+'&fabu=true'
					})
				}else{
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?ident='+this.chatList[index].ident+'&name=易通AI&fabu=true'
					})
				}
				
			},
			gotoDetail(item){
				uni.navigateTo({
					url:"/pages/work/workDetails?wid="+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zhushou-big{
		width: 100%;
		background: $bg-color;
		background-image: url('https://ai.ytslgz.cn/static/xcx/xcx_bg.png');
		background-repeat: no-repeat;
		background-attachment:fixed;
	}
	.community-list{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		.community-list-left{
			width: 100%;
			box-sizing: border-box;
			padding-left: 10px;
			padding-right: 5px;
		}
		.community-list-right{
			width: 100%;
			box-sizing: border-box;
			padding-right: 10px;
			padding-left: 5px;
		}
		.community-list-item{
			width: 100%;
			margin-bottom: 10px;
			border-radius: 15px;
			overflow: hidden;
			.content-img-box{
				width: 100%;
				height: 185px;
				position: relative;
				overflow: hidden;
				.content-img{
					width: 100%;
					height: 100%;
					display: block;
					margin: 0 auto;
				}
				.content-tip{
					padding: 5px 10px;
					position: absolute;
					top: 0;
					right: 0;
					background: rgba(0,0,0,0.5);
					color: #fff;
					font-size: 12px;
				}
			}
			.content-item-bottom{
				width: 100%;
				box-sizing: border-box;
				padding:10px 10px;
				background: #fff;
				border-top: 1px solid #f2f2f2;
				overflow: hidden;
				.content-item-bottom-title{
					font-size: 14px;
					color: #000;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					width: 100%;
					margin-bottom: 10px;
				}
				.content-item-bottom-content{
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					font-size: 12px;
					.content-item-bottom-content-left{
						width: calc(100% - 80px);
						display: flex;
						flex-direction: row;
						align-items: center;
						.user-logo-bottom{
							width: 20px;
							height: 20px;
							border-radius: 50%;
							margin-right: 5px;
						}
						p{
							width: calc(100% - 25px);
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
					}
					.content-item-bottom-content-right{
						width: 53px;
						max-width: 50%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						color: #999;
						.content-item-bottom-content-right-item{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-right: 5px;
						}
					}
				}
			}
		}
	}
	.fabu-btn{
		width: 150px;
		height: 50px;
		position: fixed;
		z-index: 10;
		bottom: 40px;
		left: calc((100% - 150px)/2);
		background:$main-color;
		color: #fff;
		border-radius: 10px;
		line-height: 50px;
		text-align: center;
	}
	.select-title{
		width: 100%;
		text-align: center;
		color: #000;
		margin-bottom: 10px;
		margin-top: 10px;
	}
	.chat-list{
		width: 100%;
		box-sizing: border-box;
		padding: 0 15px 0 15px;
		padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
		overflow: scroll;
		max-height:400px;
		.select-item{
			background-color: #4d4d4d !important;
		}
		.chat-list-item{
			width: 100%;
			height: 80px;
			border-radius: 10px;
			background-color: #fff;
			// background-color: #4d4d4d;
			margin-bottom: 15px;
			display: flex;
			flex-direction: row;
			box-sizing: border-box;
			padding: 10px;
			position: relative;
			.chat-list-left{
				width: 60px;
				height: 60px;
				border-radius: 10px;
				margin-right: 10px;
				color: #fff;
				font-size:40px;
				text-align: center;
				line-height: 60px;
				.logo-chat{
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
				.logo-chat-img{
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
			}
			.chat-list-right{
				width: calc(100% - 70px);
				.chat-list-right-top{
					width: 100%;
					height: 30px;
					line-height: 30px;
					color: #333;
					font-size: 14px;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.chat-list-right-bottom{
					width: 100%;
					font-size: 14px;
					line-height: 30px;
					color: #333;
				}
			}
		}
	}
</style>
